<script type="text/javascript">

$(document).ready(function() {

    $("#component_id").change(function(){
        var value = $(this).val();
        if (value > 0)
                $("#componentOptions").load('/component-plugin/get-component-label-options-area/id/' + value);
    });

    jQuery("#componentsUsageTable").jqGrid({
           url:'/component/get-components-usage-list',
           sortable: true,           
           datatype: "json",
           ajaxGridOptions : {type:"POST"},
           colNames:['Id','Component Name','top', 'Left', 'Height','Width','Theme Name','Label','On','Params','Timestamp'],
           colModel:[ {name:'id',index:'id', width:55},
               {name:'component_name',index:'component_id',width:120,editable:true},
               {name:'top',index:'top', width:70,editable:true},
               {name:'left',index:'left', width:70,editable:true},
               {name:'height',index:'height', width:70,editable:true},
               {name:'width',index:'width', width:70,editable:true},
               {name:'theme_name',index:'theme_name', width:120,editable:true,
                    edittype:'select',
                    editoptions:{  value: {<?foreach($this->themes as $theme):?>
                                            <?=$theme?> : '<?=$theme?>',
                                            <?endforeach;?>
                                            }
                                }
                },
               {name:'label',index:'label',width:200,editable:true},
               {name:'enabled',index:'enabled', width:20,editable:true},
               {name:'params',index:'params',width:200,editable:true},
               {name:'timestamp',index:'timestamp',width:150}],
           rowNum:20,
           rowList:[10,20,30,40,50],
           imgpath: '/js/jqGrid/themes/<?=$this->jqGridTheme?>/images',
           pager: '#pager2',
           sortname: 'id',
           viewrecords: true,
           sortorder: "asc",
           editurl:'/component/set-components-usage-list',           
           caption:"Components Usage List" }).navGrid('#pager2',{edit:true,add:true,del:true});

}); 

       $(document).ready(function() { 
            $('#add_new_component').ajaxForm({
                success: function(data) {
                    var myobj = eval('(' + data + ')');
                    var su = jQuery("#componentsUsageTable").addRowData(myobj.id,myobj);

                }
            }
            );
       });
        

function enableAll() {
    if ($('#component_height').attr('disabled')) {
        $('#component_height').attr('disabled','');
        $('#component_height').val('');
    }
    if ($('#component_width').attr('disabled')) {
        $('#component_width').attr('disabled','');
        $('#component_width').val('');
    }
}

</script>
<?require 'partial/tabs.phtml';?>
<hr/>
<form id="add_new_component" method="post" action="/component/insert-component-usage-row">
Label <input type="text" name="component_label" size="20"/>
Top <input name="component_top" type="text" size="4"/>
Left <input name="component_left" type="text" size="4"/>
Height <input name="component_height" id="component_height" type="text" size="4"/>
Width <input name="component_width" id="component_width" type="text" size="4"/>
<br/>
(position: absolute)&nbsp;
<select name="component_id" id="component_id" onchange="enableAll()">
    <option value="0">select component</option>
<? foreach ($this->components as $componentId=>$componentName):?>
    <option value="<?=$componentId?>"><?=$componentName?></option>
<? endforeach; ?>
</select>
&nbsp;
<select name="component_theme_name" id="component_theme_name" onselect="openOptionsWindow()">
    <option value="0">select theme</option>
    <?foreach ($this->themes as $theme):?>
    <option value="<?=$theme?>"><?=$theme?></option>
    <?endforeach;?>
</select>
<input type="radio" name="component_enabled" value="1" checked/>enabled
<input type="radio" name="component_enabled" value="0" />disabled
<hr/>
<div id="componentOptions"></div>
<hr/>
<input type="submit" value="add component"/>
</form>
<hr/>
<table id="componentsUsageTable" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
